<template>
  <div>
      <!-- 自定义表单承载:frdjbhxx-->
      <div class="w_100 headTips d_f j_c_s_b">
          <div class="d_f a_i_c">
              <div class="line"></div>
              {{ name }}
          </div>
          <div class="isClose" @click="close">
              <el-icon v-if="type == 'smallForm'">
                  <CloseBold />
              </el-icon>
          </div>
          <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
              style="--el-switch-on-color: #13ce66;" />
          <el-button type="primary" v-if="type == 'useForm' && isReset == 1" @click="clearForm">清除表单</el-button>
      </div>
      <div class="formBox fzDbzrjcxx">
          <div >
              <myform :fields="fields" :model="model.custom" :options="options" class="m_t_16">
              </myform>
          </div>
      </div>
  </div>
</template>
<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { customizeType } from './data'
import { CloseBold } from '@element-plus/icons-vue'
import { copy } from '../../utils/date'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
const model = {
  custom: { },
}
export default defineComponent({
  name: '',
  props: {
      type: {
          type: String,
          default: '',
      },
      unitId: {
          type: [String, Number],
          default: '',
      },
      isEnabled: {
          type: Number,
          default: '',
      },
      nodeObj: {
          type: Object,
          default: {}
      },
      vars: {
          type: Object,
          default: {}
      },
      isAudit: {
          type: Boolean,
          default: true
      },
      code:{
        type: String,
        default: '',
      }
  },
  components: {
      CloseBold
  },
  setup(props: any) {
      const data: customizeType = reactive({
          model: copy(model),
          status: true,
          id: '',
          name: '自定义',
          subTitle: '',
          options: {},
          fields: [],

          bindName:'',
          isReset: 2,
      })
      const router = useRouter()
      const form1 = ref()
      onBeforeMount(() => {
        console.log(props,'1111');
          methods.getData()
          data.status = props.isEnabled == 0 ? false : true

      })
      const methods = {
          close() {
              router.push('/system/flowPath/childForm/index')
          },
          //获取自定义表单
          getData() {
              formGet({ tag: props.code}).then((res: any) => {
                  data.id = res.id
                  data.name = res.name
                  data.isReset = res.isReset
                  if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                  
                  data.subTitle = res.subTitle
                  let formStruct = JSON.parse(res.formStruct)
                  data.fields = formStruct.formFields
                  data.bindName=res.bindName
                  data.model[res.bindName]=formStruct.formModel
                  data.fields.map((item: any) => {
                      item.disabled = props.isAudit
                  })
                  if (props.vars) {
                      const localData = props.vars
                      let custom = localData[res.bindName]
                      for (let key in custom) {
                        data.model.custom[key] = custom[key]
                      }
                  } 
                  let arr = formStruct.formFields.filter((item: any) => {
                      return item.type == 'select'
                  })
                  let ids = arr.map((item: any) => {
                      return item.prop
                  })
                  if (ids.length == 0) return
                  listByParentArr({ ids: ids }).then((res: any) => {
                      ids.map((item: any) => {
                          data.options[item] = res[item]
                      })
                  })
              })

          },
          //设置表单的启用跟停用
          change() {
              unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                  Message({ type: 'success', message: '设置成功' })
              }).catch(() => {
                  data.status = !data.status
              })
          },
          //清除表单数据
          clearForm() {
              data.model = copy(model)
          },
          resultData() {
              return new Promise((resolve, reject) => {
                data.model[data.bindName]=data.model.custom
                resolve(data.model)
              })
          },
          saveData() {
              return new Promise((resolve, reject) => {
                  resolve(data.model)
              })
          },

      }
      return {
          ...toRefs(data),
          ...methods, form1
      }
  }
})
</script>
<style lang='scss'>
.fzDbzrjcxx {
  .el-form-item {
      width: 50% !important;
      margin-right: 0px !important;

      .el-form-item__content {
          width: calc(100% - 200px) !important;

          .el-input,
          .el-cascader,
          .el-select {
              width: 100% !important;
          }
      }
  }
}
</style>